<template>
  <div class="slide-widget" ref="slideContainer">
    <el-carousel
      v-if="params.length !== 0"
      arrow="never"
      :loop="true"
      indicator-position="none"
      :height="clientHeight + ''"
      :interval="3000"
      :direction="direction"
    >
      <el-carousel-item v-for="(item, index) of params" :key="index">
        <img :src="item.url" :alt="item.name" :title="item.name" />
      </el-carousel-item>
    </el-carousel>
    <div class="empty" v-else>
      <i class="el-icon-picture" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewSlide',
  props: {
    params: {
      type: Array,
      default: () => ([])
    },
    direction: {
      type: String,
      default: 'horizontal',
      validator: val => ['horizontal', 'vertical'].includes(val)
    },
    // height: {
    //   type: [String, Number],
    //   default: '140'
    // },
    // width: {
    //   type: [String, Number],
    //   default: '375'
    // },
    index: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      clientWidth: 355
    }
  },
  computed: {
    width () {
      return this.params[0] ? this.params[0].width || 375 : 375
    },
    height () {
      return this.params[0] ? this.params[0].height || 140 : 140
    },
    radio () {
      return Number(this.height) / Number(this.width)
    },
    clientHeight () {
      return this.radio * this.clientWidth
    }
  },
  watch: {
    radio () {
      this.$nextTick(() => {
        this.$el.style.setProperty('--height', `${this.clientHeight}px`)
      })
    }
  },
  mounted () {
    this.clientWidth = this.$el.clientWidth || 355
  }
}
</script>

<style lang="less" scoped>
.slide-widget {
  --height: 140px;
  width: 100%;
  height: var(--height);
  box-sizing: border-box;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  ::v-deep .el-carousel__container {
    height: var(--height);
  }
}
</style>